<template>
  <div class="commodity-like-container">

    <div class="down-load-box">
      <img src="./logo144.png" class="logo-pic"/>
      <span class="down-load-text">下载APP，更多优惠商品选择</span>
      <button class="down-load-btn" @click="download">立即下载</button>
    </div>

    <div class="commodity-info-box">
      <span class="like-rule-text" @click="openRuleModal">点赞规则</span>
      <img class="user-like-avatar" :src="userPic" v-if="userPic"/>
      <span class="user-like-avatar" v-else></span>
      <span class="user-like-nickname">{{nickName}}</span>
      <span class="user-like-desc">我在蓝聘网上发现了一件好商品，快来帮我打折~</span>


      <div class="commodity-info-content-mask"></div>
      <div class="commodity-info-content">
        <img class="commodity-info-pic" :src="productPic" v-if="productPic"/>
        <span class="commodity-info-pic" v-else></span>
        <span class="commodity-info-text">{{productName}}</span>
      </div>
    </div>

    <div class="like-count-box">
      <img src="./icon_like.png" class="like-pic"/>

      <span class="like-text">已有<strong class="like-num">{{likePeople}}人</strong>点赞</span>
      <span class="like-text" v-if="likePeople < getLikeNum1">&nbsp;,&nbsp;无优惠</span>
      <span class="like-text"
            v-else-if="likePeople >= getLikeNum1 && likePeople < getLikeNum2">&nbsp;,&nbsp;可享受<strong
        class="like-num">{{discount1}}折</strong>优惠</span>
      <span class="like-text"
            v-else-if="likePeople >= getLikeNum2 && likePeople < getLikeNum3">&nbsp;,&nbsp;可享受<strong
        class="like-num">{{discount2}}折</strong>优惠</span>
      <span class="like-text"
            v-else-if="likePeople >= getLikeNum3 && likePeople < getLikeNum4">&nbsp;,&nbsp;可享受<strong
        class="like-num">{{discount3}}折</strong>优惠</span>
      <span class="like-text" v-else-if="likePeople >= getLikeNum4">&nbsp;,&nbsp;可享受<strong class="like-num">{{discount4}}折</strong>优惠</span>
    </div>


    <div class="like-progress-box">

      <div class="like-progress-con">
        <div class="discount-type-box">
          <span class="discount-type discount-position1" :style="'left:'+ (scale1-3) +'%;'"
                v-if="likePeople <= getLikeNum1">{{discount1}}折</span>
          <!--<div class="like-discount-label-box1" :style="'left:'+ (dataComplete-5) +'%;'"-->
               <!--v-else-if="likePeople >= getLikeNum1 && likePeople < getLikeNum2">-->
            <!--<span class="like-discount-label-text">{{discount1}}折</span>-->
          <!--</div>-->

          <span class="discount-type discount-position2" :style="'left:'+ (scale2-3) +'%;'"
                v-if="likePeople <= getLikeNum2">{{discount2}}折</span>
          <!--<div class="like-discount-label-box2" :style="'left:'+ (dataComplete-5) +'%;'"-->
               <!--v-else-if="likePeople >= getLikeNum2 && likePeople < getLikeNum3">-->
            <!--<span class="like-discount-label-text">{{discount2}}折</span>-->
          <!--</div>-->

          <span class="discount-type discount-position3" :style="'left:'+ (scale3-3) +'%;'"
                v-if="likePeople <= getLikeNum3">{{discount3}}折</span>
          <!--<div class="like-discount-label-box3" :style="'left:'+ (dataComplete-5) +'%;'"-->
               <!--v-else-if="likePeople >= getLikeNum3 && likePeople < getLikeNum4">-->
            <!--<span class="like-discount-label-text">{{discount3}}折</span>-->
          <!--</div>-->

          <span class="discount-type discount-position4" v-if="likePeople <= getLikeNum4 || likePeople > getLikeNum4">{{discount4}}折</span>
          <!--<div class="like-discount-label-box4" v-else-if="likePeople >= getLikeNum4">-->
            <!--<span class="like-discount-label-text">{{discount4}}折</span>-->
          <!--</div>-->
        </div>

        <div class="like-progress-status-box">
          <span class="scale-position1" :style="'left:'+ scale1 +'%;'"></span>
          <span class="scale-position1" :style="'left:'+ scale2 +'%;'"></span>
          <span class="scale-position1" :style="'left:'+ scale3 +'%;'"></span>
          <img src="./bar_nor_scale.png" class="like-progress-status1"/>
          <img src="./bar.png" class="like-progress-status2" :style="'width:'+ dataComplete +'%;'" v-if="dataComplete"/>
        </div>


        <div class="like-count-num-box">
          <span class="like-count-num like-count-position1" :style="'left:'+ (scale1-2) +'%;'"
                v-if="likePeople <= getLikeNum1">{{getLikeNum1}}人</span>
          <span class="like-count-num like-count-position2" :style="'left:'+ (scale2-2) +'%;'"
                v-if="likePeople <= getLikeNum2">{{getLikeNum2}}人</span>
          <span class="like-count-num like-count-position2" :style="'left:'+ (scale3-2) +'%;'"
                v-if="likePeople <= getLikeNum3">{{getLikeNum3}}人</span>
          <span class="like-count-num like-count-position3" v-if="likePeople <= getLikeNum4">{{getLikeNum4}}人</span>
        </div>
      </div>

    </div>

    <div class="like-opt-box">
      <button class="like-opt-start-btn" v-if="likeStatus == 0" @click="giveLike">帮好友点赞打折</button>
      <button class="like-opt-end-btn" v-else-if="likeStatus == 1">已点赞</button>
      <button class="like-opt-end-btn" v-else-if="endMark == 1">已结束</button>
    </div>

    <!--点赞好友名单-->
    <div class="like-rank-box">
      <div class="like-rank-content">
        <div class="like-rank-text-box">
          <span class="like-text-line"></span>
          <span class="like-rank--text">点赞好友名单</span>
          <span class="like-text-line"></span>
        </div>

        <div class="like-rank-no-result" v-if="likeUserList.length <=0">暂无好友点赞~</div>

        <div class="like-rank-result-box" v-if="likeUserList.length >0">
          <ul class="user-box">
            <li v-for="(item,index) in likeUserList" :key="index">
              <div class="avatar-box">
                <img :src="item.userImage" class="avatar1" onclick="return false" v-if="item.userImage"/>
                <span v-else class="avatar2"></span>
              </div>
              <div class="nickname">{{item.userName}}</div>
            </li>
          </ul>
        </div>

      </div>
    </div>

    <!--规则说明-->
    <div class="like-rule-content-pop" v-if="showRuleModal">
      <div class="like-rule-content-box">
        <div class="like-rule-title">
          <span class="like-rule-desc-text">点赞规则</span>
          <img src="./delete.png" class="like-rule-del" @click="closeRuleModal"/>
        </div>
        <div class="like-rule-content-desc">
          <p>1. 用户需要登录蓝聘账户才能帮助好友点赞打折，每个蓝聘账户仅能点赞一次</p>
          <p>2. 为好友点赞获得折扣优惠的商品，只有在好友购买本商品时才能使用</p>
          <p>3. 本平台保留该活动的解释权</p>
        </div>
      </div>
    </div>

    <login-popup v-model="showLoginModal" @showPage="showLoginPage"></login-popup>
  </div>

</template>

<script>
  import {baseUrl} from "../../../config/env";
  import loginPopup from "../../../components/loginPopup";
  import {Base64} from 'js-base64';
  import {getSessionStore, getUrlKey} from "../../../config/util";

  export default {
    inject: ['reload'],
    data() {
      return {
        userSign: "",
        productId: getUrlKey("productId"),
        shareUserId: getUrlKey("shareUserId"),
        likePeople: 0,
        likeStatus: 0,
        likeUserList: [],
        showRuleModal: false,
        dataComplete: 0,
        scale1: 25,
        scale2: 50,
        scale3: 75,
        getLikeNum1: 5,
        getLikeNum2: 10,
        getLikeNum3: 15,
        getLikeNum4: 20,
        discount1: 9.5,
        discount2: 9,
        discount3: 8.5,
        discount4: 8,
        nickName: "",
        userPic: "",
        endMark: 0,
        productName: "",
        productPic: "",
        showLoginModal: false,
      }
    },
    created() {
      if (getSessionStore("user_sign")) {
        this.userSign = Base64.decode(getSessionStore("user_sign"));
      }

      this.queryCommodity();
    },
    methods: {
      queryCommodity() {
        this.axios.get(baseUrl + "/product/get_product_share_detail?sgin=" + this.userSign + "&productId=" + this.productId + "&shareUserId=" + this.shareUserId).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.nickName = resultObj.data.userName;
            this.userPic = resultObj.data.userUrl;
            this.likeStatus = resultObj.data.isLike;//0为点赞 1已经点赞
            this.endMark = resultObj.data.status;//1已结束
            this.productName = resultObj.data.productName;//商品名称
            this.productPic = resultObj.data.productPic;//商品图片

            if (resultObj.data.shareUserList != null && resultObj.data.shareUserList.length > 0) {
              this.likePeople = resultObj.data.shareUserList.length;//点赞人数
              if (resultObj.data.shareUserList.length >= 20) {
                this.dataComplete = 100;
              } else {
                this.dataComplete = resultObj.data.shareUserList.length * 5;
              }
              this.likeUserList = resultObj.data.shareUserList;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      download() {//下载APP
        window.location.href = "https://url.cn/5AUAFDU";
      },
      openRuleModal() {
        this.showRuleModal = true;
      },
      closeRuleModal() {
        this.showRuleModal = false;
      },
      giveLike() {//点赞
        if (this.userSign) {
          this.$vux.loading.show({
            text: '加载中',
          });
          this.axios.post(baseUrl + "/product/insert_share_detail?sgin=" + this.userSign + "&productId=" + this.productId + "&shareUserId=" + this.shareUserId).then((res) => {
            let resultObj = res.data;
            this.$vux.loading.hide();
            if (resultObj.code == 0) {
              if (resultObj.data == 0) {
                this.$vux.toast.text("帮好友点赞打折，请重试", "middle");
              } else {
                this.reload();
              }
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          })
        } else {
          this.showLoginModal = true;
        }
      },
      showLoginPage() {//登录成功
        this.userSign = Base64.decode(getSessionStore("user_sign"));
        this.axios.post(baseUrl + "/product/insert_share_detail?sgin=" + this.userSign + "&productId=" + this.productId + "&shareUserId=" + this.shareUserId).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.$vux.toast.text("帮好友点赞打折，请重试", "middle");
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        })
      }
    },
    components: {
      loginPopup
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .commodity-like-container
    wh(100%, 100%)
    background: #FFF
    .down-load-box
      display: flex
      align-items: center
      wh(100%, 1.333rem)
      background: #3CAFFF
      .logo-pic
        margin-left: 0.28rem
        margin-right: 0.16rem
        wh(0.853rem, 0.853rem)
      .down-load-text
        size-color(0.427rem, #FFFFFF)
        font-weight: 500
      .down-load-btn
        margin-left: auto
        margin-right: 0.32rem
        wh(1.867rem, 0.667rem)
        border: 0.027rem solid #FFF
        border-radius: 0.08rem
        size-color(0.373rem, #FFF)
        background: #3CAFFF
    .commodity-info-box
      position: relative
      display: flex
      align-items: center
      flex-direction: column
      wh(100%, 5.333rem)
      bg-image("./banner_bg.png", 100%, 100%)
      .like-rule-text
        position: absolute
        right: 0
        top: 0.453rem
        wh(2rem, 0.64rem)
        background: #FFA914
        border-top-left-radius: 0.32rem
        border-bottom-left-radius: 0.32rem
        size-color(0.32rem, #FFF)
        text-align: center
        line-height: 0.64rem
      .user-like-avatar
        margin-top: 0.64rem
        margin-bottom: 0.2rem
        wh(1.6rem, 1.6rem)
        background: #f5f5f5
        border-radius: 50%
      .user-like-nickname
        size-color(0.347rem, #FFF)
        opacity: 0.7
      .user-like-desc
        padding-top: 0.32rem
        padding-bottom: 0.32rem
        size-color(0.4rem, #FFF)
      .commodity-info-content-mask
        position: absolute
        bottom: -1rem
        z-index: 0
        wh(9.067rem, 2.507rem)
        background: #F5DCE1
        border-radius: 0.107rem
      .commodity-info-content
        position: absolute
        bottom: -1.42rem
        z-index: 10
        display: flex
        wh(9.36rem, 2.747rem)
        background: #FFF
        box-shadow: 0rem 0.133rem 0.173rem 0rem rgba(230, 129, 157, 0.25)
        border-radius: 0.16rem
        .commodity-info-pic
          wh(2rem, 2rem)
          background: rgba(245, 245, 245, 1)
          border: 0.013rem solid rgba(235, 235, 235, 1)
          border-radius: 0.107rem
          margin-left: 0.32rem
          margin-right: 0.32rem
          margin-top: 0.36rem
        .commodity-info-text
          padding-top: 0.533rem
          width: 5.893rem
          line-height: 0.427rem
          size-color(0.347rem, #333)
    .like-count-box
      fj(center, center)
      padding-top: 2rem
      padding-bottom: 0.16rem
      .like-pic
        wh(0.64rem, 0.64rem)
      .like-text
        padding-left: 0.4rem
        size-color(0.427rem, #333333)
        font-weight: 500
        &:last-child
          padding-left: 0
        .like-num
          color: #E6313F

    .like-progress-box
      width: 100%
      display: flex
      justify-content: center
      .like-progress-con
        width: 9.147rem
        .discount-type-box
          display: flex
          align-items: center
          padding-top: 0.667rem
          position: relative
          .discount-type
            size-color(0.32rem, #3C82FF)
            font-weight: 500
          .discount-position1
            position: absolute
            left: 2.267rem
          .discount-position2
            position: absolute
            left: 4.56rem
          .discount-position3
            position: absolute
            left: 6.853rem
          .discount-position4
            margin-left: auto
          .like-discount-label-box1
            position: absolute
            bottom: 0
            fj(center, center)
            wh(0.96rem, 0.96rem)
            bg-image("./label.png", 100%, 100%)
            .like-discount-label-text
              size-color(0.32rem, #F5F5F5)
              font-weight: 500
          .like-discount-label-box2
            position: absolute
            bottom: 0
            fj(center, center)
            wh(0.96rem, 0.96rem)
            bg-image("./label.png", 100%, 100%)
            .like-discount-label-text
              size-color(0.32rem, #F5F5F5)
              font-weight: 500
          .like-discount-label-box3
            position: absolute
            bottom: 0
            fj(center, center)
            wh(0.96rem, 0.96rem)
            bg-image("./label.png", 100%, 100%)
            .like-discount-label-text
              size-color(0.32rem, #F5F5F5)
              font-weight: 500
          .like-discount-label-box4
            position: absolute
            right: -0.2rem
            bottom: 0
            fj(center, center)
            wh(0.96rem, 0.96rem)
            bg-image("./label.png", 100%, 100%)
            .like-discount-label-text
              size-color(0.32rem, #F5F5F5)
              font-weight: 500
        .like-progress-status-box
          wh(100%, 0.267rem)
          padding-top: 0.16rem
          padding-bottom: 0.16rem
          position: relative
          display: flex
          .like-progress-status1
            position: absolute
            left: 0
            z-index: 1
            wh(100%, 0.267rem)
          .like-progress-status2
            position: absolute
            left: 0
            z-index: 2
            wh(100%, 0.267rem)
          .scale-position1
            position: absolute
            wh(0.04rem, 0.267rem)
            z-index: 2
            background: rgba(255, 255, 255, 0.8)
        .like-count-num-box
          display: flex
          align-items: center
          padding-bottom: 0.56rem
          position: relative
          .like-count-num
            size-color(0.293rem, #999999)
          .like-count-position1
            position: absolute
            left: 3.44rem
          .like-count-position2
            position: absolute
            left: 7.08rem
          .like-count-position3
            margin-left: auto
    .like-opt-box
      width: 100%
      display: flex
      justify-content: center
      margin-bottom: 0.8rem
      .like-opt-start-btn
        wh(8.533rem, 1.2rem)
        background: linear-gradient(0deg, rgba(255, 77, 119, 1), rgba(235, 33, 50, 1))
        border-radius: 0.6rem
        size-color(0.453rem, #FFF)
      .like-opt-end-btn
        wh(8.533rem, 1.2rem)
        background: rgba(204, 204, 204, 1)
        border-radius: 0.6rem
        size-color(0.453rem, rgba(255, 255, 255, 1))
        font-weight: 500
    .like-rank-box
      display: flex
      justify-content: center
      wh(100%, auto)
      padding-bottom: 0.8rem
      .like-rank-content
        wh(9.36rem, auto)
        background: rgba(245, 245, 245, 1)
        border-radius: 0.16rem
        .like-rank-text-box
          display: flex
          align-items: center
          justify-content: center
          padding-top: 0.64rem
          padding-bottom: 0.64rem
          .like-text-line
            wh(2.56rem, 0.027rem)
            background: rgba(224, 224, 224, 1)
          .like-rank--text
            padding-left: 0.427rem
            padding-right: 0.427rem
            size-color(0.373rem, rgba(102, 102, 102, 1))
        .like-rank-no-result
          padding-top: 0.533rem
          text-align: center
          size-color(0.347rem, rgba(153, 153, 153, 1))
          padding-bottom: 1.387rem
        .like-rank-result-box
          wh(100%, auto)
          .user-box
            display: flex
            flex-wrap: wrap
            width: 100%
            li
              wh(20%, 1.65rem)
              margin-bottom: 0.4rem
              box-sizing: border-box
              .avatar-box
                margin: 0 auto
                fj(center, center)
                border-radius(50%)
                wh(1.173rem, 1.173rem)
                border: 0.013rem dashed rgba(166, 166, 166, 1)
                .avatar1
                  border-radius(50%)
                  wh(1rem, 1rem)
                .avatar2
                  border-radius(50%)
                  wh(1rem, 1rem)
                  background: #f5f5f5
              .nickname
                width: 100%
                text-align: center
                padding-top: 0.1rem
                ellipsis()
    .like-rule-content-pop
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      background-color: rgba(0, 0, 0, 0.5)
      .like-rule-content-box
        position: absolute
        bottom: 0
        wh(100%, 9rem)
        background: #FFF
        .like-rule-title
          display: flex
          align-items: center
          justify-content: center
          position: relative
          border-bottom: 0.013rem solid #ccc
          wh(100%, 1.333rem)
          .like-rule-desc-text
            size-color(0.453rem, rgba(27, 27, 27, 1))
          .like-rule-del
            position: absolute
            right: 0.32rem
            wh(0.4rem, 0.4rem)
        .like-rule-content-desc
          width: 8.853rem
          margin: 0 auto
          padding-top: 0.64rem
          P
            size-color(0.4rem, rgba(68, 68, 68, 1))
            line-height: 0.64rem
            margin-bottom: 0.44rem
</style>
